<template>
  <div class="wrap">
    <CnBoldP class="mt-11 text-20">预警配置</CnBoldP>
    <CnNormalP class="mt-6 mb-20 text-4xText"
      >根据您配置的预警标准,设备或参数异常时将发送预警消息</CnNormalP
    >
    <ProductFilesItem></ProductFilesItem>
    <!-- <div class="main_box">
      <a-card class="main_box_card" v-for="i in 4" :key="i">
        <div class="item_box">
          <div class="title_box">
            <span class="title_text">测试一号点</span>
            <div class="item_switch_box">
              <a-switch checked-children="开" un-checked-children="关" />
            </div>
          </div>
        </div>
      </a-card>
    </div> -->
    <div class="main_box">
      <a-card
        class="card_main_item"
        v-for="(dpewcdl, index) in devParamEarlyWarningConfigDataList"
        :key="dpewcdl.confId"
        :class="{card_left: (index + 1) % 2 != 0, card_right: (index + 1) % 2 == 0}"
      >
        <div class="title_box">
          <div class="param_ics">
            <ParamIcon :imgName="dpewcdl.paramName" class="opacity-25 mr-6 param_img"></ParamIcon>
            <span>{{ dpewcdl.paramName }}</span>
          </div>
          <div class="param_switch_box">
            <!-- v-model:checked="checked1" -->
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-model:checked="dpewcdl.isOpen"
              @change="checkedChange(dpewcdl.confId, dpewcdl.isOpen)"
            />
          </div>
        </div>
        <div class="content_box">
          <div class="time_quantum_box">
            <span class="label">时间段</span>
            <span class="startTime">{{ dpewcdl.startTime }} - </span>
            <span class="endTime">{{ dpewcdl.endTime }}</span>
          </div>
          <div class="interval_time_box">
            <span class="label">间隔时间</span>
            <span class="value">{{ dpewcdl.intervalTime }}</span>
            <span class="unit">分钟</span>
          </div>
          <div class="split_hr">参数预警配置信息：</div>

          <div class="not_data" v-if="dpewcdl.devEarlyWarnConfDataList?.length == 0">
            <span class="text">暂无预警配置信息</span>
          </div>

          <div
            v-for="(cfls, indexc) in dpewcdl.devEarlyWarnConfDataList"
            style="width: 800px; display: flex; flex-direction: column; flex-wrap: wrap"
          >
            <div class="time_quantum_box" style="width: 300px">
              <span class="label">预警级别</span>
              <a-select
                v-model:value="cfls.level"
                style="width: 100px; margin-right: 20px"
                size="small"
                @change="(e:any)=>{
                  warnLevelChange(e,dpewcdl.confId,dpewcdl.devEarlyWarnConfDataList)
                }"
              >
                <a-select-option
                  value="一级"
                  :disabled="dpewcdl.selectedLevel.indexOf('一级') != -1"
                  >一级</a-select-option
                >
                <a-select-option
                  value="二级"
                  :disabled="dpewcdl.selectedLevel.indexOf('二级') != -1"
                  >二级</a-select-option
                >
                <a-select-option
                  value="三级"
                  :disabled="dpewcdl.selectedLevel.indexOf('三级') != -1"
                  >三级</a-select-option
                >
              </a-select>
            </div>
            <div class="time_quantum_box" style="width: 700px">
              <span class="label">预警范围</span>
              <a-select
                v-model:value="cfls.warnRangeType"
                style="width: 100px; margin-right: 20px"
                size="small"
              >
                <a-select-option value="两者之间">两者之间</a-select-option>
                <a-select-option value="大于等于">大于等于</a-select-option>
                <a-select-option value="小于等于">小于等于</a-select-option>
              </a-select>
              <span style="display: inline" v-if="cfls.warnRangeType == '两者之间'">
                <a-input-number
                  style="margin: 0px 10px"
                  v-model:value="cfls.warnRangeLeft"
                ></a-input-number>
                -<a-input-number
                  style="margin: 0px 10px"
                  v-model:value="cfls.warnRangeRight"
                ></a-input-number>
              </span>
              <span v-else>
                <a-input-number v-model:value="cfls.warnRangeCenter"></a-input-number>
              </span>
              <!-- <span class="startTime">{{ `未设置` }} - </span>
              <span class="endTime">{{ `未设置` }}</span> -->
            </div>
            <div class="time_quantum_box" style="width: 1200px">
              <span class="label">提示信息</span>

              <div style="padding-left: 100px; margin-top: -32px; color: gray; letter-spacing: 2px">
                <!-- 温度一级警报 -->
                <a-textarea
                  style="width: 620px"
                  v-model:value="cfls.warnMsg"
                  placeholder="提示信息内容"
                  :rows="4"
                />
              </div>
            </div>
            <a-button
              type="danger"
              style="width: 700px; margin: 20px 20px"
              danger
              @click="delConf(dpewcdl.confId, indexc, dpewcdl.devEarlyWarnConfDataList)"
            >
              <DeleteOutlined style="position: relative; top: -3px" />
              删除
            </a-button>
          </div>

          <div class="plus_icon_box" style="width: 800px; margin-top: 16px; cursor: pointer">
            <svg
              t="1695721500400"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3176"
              width="28"
              height="28"
              @click="addConf(dpewcdl.confId)"
            >
              <path
                d="M512 70.283C267.486 70.283 69.268 268.046 69.268 512S267.486 953.717 512 953.717 954.732 755.954 954.732 512 756.514 70.283 512 70.283m223.045 488.321H558.603v176.442c0 25.738-20.866 46.604-46.604 46.604s-46.604-20.866-46.604-46.604V558.604H288.953c-25.738 0-46.604-20.866-46.604-46.604s20.866-46.604 46.604-46.604h176.442V288.954c0-25.738 20.866-46.604 46.604-46.604s46.604 20.866 46.604 46.604v176.442h176.442c25.738 0 46.604 20.866 46.604 46.604s-20.866 46.604-46.604 46.604z"
                fill="#3980f2"
                p-id="3177"
              ></path>
            </svg>
          </div>
        </div>

        <div class="footer">
          <div class="edit_time" @click="editTimeClick(dpewcdl)">
            <img
              style="width: 24px"
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/edit-content.png"
              alt=""
            />
            <span class="label">修改时间信息</span>
          </div>
          <div
            class="edit_wran"
            @click="saveWranEarlyConf(dpewcdl.confId, dpewcdl.devEarlyWarnConfDataList)"
          >
            <img
              style="width: 24px"
              src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/icon/edit-content.png"
              alt=""
            />
            <span class="label">保存预警设置信息</span>
          </div>
        </div>
      </a-card>
    </div>

    <a-modal
      v-model:visible="isShowEditTimeInfoModal"
      :title="`修改${currentEditParamWarnInfo.paramName}时间信息`"
      @ok="editParamWarnTimeModalOkClick"
      @cancel="editParamWarnTimeModalCancelClick"
    >
      <div class="edit_time_modal_box">
        <div class="time_quantum">
          <span class="label">时间段</span>
          <a-time-picker
            @change="(e:any)=>{
currentSETimeChange(e)
            }"
            v-model:value="currentEditParamWarnInfo.startTime"
            valueFormat="HH:mm:ss"
          />
          -
          <a-time-picker v-model:value="currentEditParamWarnInfo.endTime" valueFormat="HH:mm:ss" />
        </div>
        <div class="interval_time">
          <span class="label">间隔时间</span>
          <a-input-number
            v-model:value="currentEditParamWarnInfo.intervalTime"
            placeholder=""
            size="default"
            style="width: 100px"
          />
          <span class="unit">分钟</span>
        </div>
      </div>
    </a-modal>

    <!-- <a-modal
      v-model:visible="isShowEditWarnInfoModal"
      style="width: 780px"
      :title="`修改${currentEditParamWarnInfo.paramName}预警信息`"
      @ok="editWranInfoModalOkClick"
    >
      <div class="edit_warn_modal_box">
        <div class="wran_level">
          <span class="label">预警级别</span>
          <a-select
            v-model:value="currentEditParamWarnInfo.currentLevel"
            style="width: 100px; margin-right: 20px"
            size="small"
          >
            <a-select-option value="一级">一级</a-select-option>
            <a-select-option value="二级">二级</a-select-option>
            <a-select-option value="三级">三级</a-select-option>
          </a-select>
        </div>

        <div class="warn_early_content_box">
          <div class="one" v-if="currentEditParamWarnInfo.currentLevel == '一级'">
            <span class="warn_early_label">
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/one_warn_icon.png"
                alt=""
              />
              一级预警
            </span>
            <div class="warn_range">
              <span class="label">范围类型</span>
              <a-select
                v-model:value="currentEditParamWarnInfo.wranRangeType"
                style="width: 100px; margin-right: 20px"
                size="small"
              >
                <a-select-option value="两者之间">两者之间</a-select-option>
                <a-select-option value="大于等于">大于等于</a-select-option>
                <a-select-option value="小于等于">小于等于</a-select-option>
              </a-select>

              <span class="label">预警范围</span>
              <span class="isTwoRange" v-if="currentEditParamWarnInfo.wranRangeType == '两者之间'">
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeLeftValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
                -
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeRightValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>
              <span class="isOneRange" v-else>
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeCenterValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>

              <div class="warning_info">
                <span class="label">预警提示信息</span>
                <a-textarea
                  v-model:value="currentEditParamWarnInfo.wranMsg"
                  placeholder="请填写预警时的提示信息"
                  :rows="4"
                />
              </div>
            </div>
          </div>
          <div class="two" v-if="currentEditParamWarnInfo.currentLevel == '二级'">
            <span class="warn_early_label">
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/two_warn_icon.png"
                alt=""
              />
              二级预警
            </span>
            <div class="warn_range">
              <span class="label">范围类型</span>
              <a-select
                v-model:value="currentEditParamWarnInfo.wranRangeType"
                style="width: 100px; margin-right: 20px"
                size="small"
              >
                <a-select-option value="两者之间">两者之间</a-select-option>
                <a-select-option value="大于等于">大于等于</a-select-option>
                <a-select-option value="小于等于">小于等于</a-select-option>
              </a-select>

              <span class="label">预警范围</span>
              <span class="isTwoRange" v-if="currentEditParamWarnInfo.wranRangeType == '两者之间'">
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeLeftValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
                -
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeRightValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>
              <span class="isOneRange" v-else>
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeCenterValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>
              <div class="warning_info">
                <span class="label">预警提示信息</span>
                <a-textarea
                  v-model:value="currentEditParamWarnInfo.wranMsg"
                  placeholder="请填写预警时的提示信息"
                  :rows="4"
                />
              </div>
            </div>
          </div>
          <div class="three" v-if="currentEditParamWarnInfo.currentLevel == '三级'">
            <span class="warn_early_label">
              <img
                src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/three_warn_icon.png"
                alt=""
              />
              三级预警
            </span>
            <div class="warn_range">
              <span class="label">范围类型</span>
              <a-select
                v-model:value="currentEditParamWarnInfo.wranRangeType"
                style="width: 100px; margin-right: 20px"
                size="small"
              >
                <a-select-option value="两者之间">两者之间</a-select-option>
                <a-select-option value="大于等于">大于等于</a-select-option>
                <a-select-option value="小于等于">小于等于</a-select-option>
              </a-select>

              <span class="label">预警范围</span>
              <span class="isTwoRange" v-if="currentEditParamWarnInfo.wranRangeType == '两者之间'">
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeLeftValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
                -
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeRightValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>
              <span class="isOneRange" v-else>
                <a-input-number
                  v-model:value="currentEditParamWarnInfo.rangeCenterValue"
                  placeholder=""
                  size="small"
                  style="width: 100px"
                />
              </span>

              <div class="warning_info">
                <span class="label">预警提示信息</span>
                <a-textarea
                  v-model:value="currentEditParamWarnInfo.wranMsg"
                  placeholder="请填写预警时的提示信息"
                  :rows="4"
                />
              </div>
            </div>
          </div>

          <div class="not_warn" v-if="currentEditParamWarnInfo.currentLevel == '不预警'"></div>
        </div>
      </div>
    </a-modal> -->
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  import {message} from 'ant-design-vue'
  export default defineComponent({
    name: 'earlyWarning'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {
    selectDevEarlyWarnConfApi,
    openDevEarlyWarnConfApi,
    closeDevEarlyWarnConfApi,
    editDevEarlyWarnConfDataApi,
    editDevEarlyWarnConfApi
  } from '@/api/earlyWarning.ts'
  import {
    paramEarlyWarningConfig,
    paramEarlyWarningConfigList,
    WranConfType,
    WranConfTypeList
  } from './type.ts'
  import {DeleteOutlined} from '@ant-design/icons-vue'
  import {getUserId} from '@/libs/auth'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP} from '@/components/text'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  import {ParamIcon, ParamStatus} from '@/components/image'
  const {route} = useGlobalAPI()

  /* 数据 ------------------------------------------------------------------- */
  // 当前设备的 devId
  const currentDevId = ref(1235)

  // 修改时间信息的弹窗显示的标识
  const isShowEditTimeInfoModal = ref(false)

  // 修改预警信息的弹窗显示的标识
  const isShowEditWarnInfoModal = ref(false)

  // 当前设备的参数预警配置列表
  const devParamEarlyWarningConfigDataList = ref<paramEarlyWarningConfigList>([])

  // 当前修改的参数预警信息
  const currentEditParamWarnInfo = ref<paramEarlyWarningConfig>({})

  // 参数预警信息卡片加载状态标识
  const isParamWarnConfLoading = ref(false)

  // 当前已选择的预警级别
  const currentSelectedLevel = ref([])

  // 当前的预警级别信息数据列表
  const currentWranLevelInfoDataList = ref<WranConfTypeList>([])

  // 保存一份原预警配置数据
  const yWranEarlyConfDataList = ref<paramEarlyWarningConfigList>([])

  /* 方法 -------------------------------------------------------------------- */

  // 提交判断级别的函数
  const judgeSaveLevelFunc = (level: string) => {
    let levelR = ''
    switch (level) {
      case '一级':
        levelR = '0253'
        break
      case '二级':
        levelR = '0254'
        break
      case '三级':
        levelR = '0255'
        break

      default:
        break
    }
    return levelR
  }

  // 初始化判断级别的函数
  const judgeMountLevelFunc = (level: string) => {
    let levelR = ''
    switch (level) {
      case '0253':
        levelR = '一级'
        break
      case '0254':
        levelR = '二级'
        break
      case '0255':
        levelR = '三级'
        break

      default:
        break
    }
    return levelR
  }
  // 处理范围数据的函数
  const disposeRangeFunc = (item: WranConfType) => {
    let rangeValue = ''
    switch (item.warnRangeType) {
      case '两者之间':
        rangeValue = item.warnRangeLeft + '-' + item.warnRangeRight
        break
      case '大于等于':
        rangeValue = '>=' + item.warnRangeCenter
        break
      case '小于等于':
        rangeValue = '<=' + item.warnRangeCenter
        break
      default:
        break
    }
    return rangeValue
  }

  // 判断当前是添加还是修改还是删除属性的函数
  const judgeAddOrEditOrDelFunc = (confId: number, itemN: WranConfType) => {
    let propertyType = ''
    // 之前有没有的标识
    let yBeArr = []
    let isYBeFlag = null
    yWranEarlyConfDataList.value.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        item.devEarlyWarnConfDataList?.forEach((item1: WranConfType) => {
          // if (judgeSaveLevelFunc(item1.level) == judgeSaveLevelFunc(itemN.level)) {
          //   isBe = true
          // }
          yBeArr.push(judgeSaveLevelFunc(item1.level))
        })
      }
    })

    if (yBeArr.indexOf(judgeSaveLevelFunc(itemN.level)) != -1) {
      isYBeFlag = true
    } else {
      isYBeFlag = false
    }

    switch (isYBeFlag) {
      case null:
        break
      case true:
        break
      case false:
        break
      default:
        break
    }
    // console.log(yBeArr)
  }

  // 保存预警设置信息的点击事件
  const saveWranEarlyConf = async (confId: number, data: WranConfTypeList) => {
    console.log(confId, data)
    let yWranEarlyConfDataList = JSON.parse(localStorage.getItem('yWranEarlyConfDataList'))
    console.log(yWranEarlyConfDataList)

    let ystrArr = []
    yWranEarlyConfDataList.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        item.devEarlyWarnConfDataList?.forEach(item1 => {
          ystrArr.push(judgeSaveLevelFunc(item1.level))
        })
      }
    })
    console.log(ystrArr)
    let newData = []

    // 添加新增数据
    data.forEach((item, index) => {
      console.log(judgeSaveLevelFunc(item.level))
      if (ystrArr.indexOf(judgeSaveLevelFunc(item.level)) == -1) {
        console.log(-1)

        newData.push({
          confId: confId,
          earlyWarnContent: item.warnMsg,
          earlyWarnLevel: judgeSaveLevelFunc(item.level),
          rangeData: disposeRangeFunc(item),
          makeProperty: 'add'
        })
      }
    })

    // 添加修改数据
    data.forEach((item, index) => {
      if (ystrArr.indexOf(judgeSaveLevelFunc(item.level)) != -1) {
        console.log(-1)
        newData.push({
          confId: confId,
          earlyWarnContent: item.warnMsg,
          earlyWarnLevel: judgeSaveLevelFunc(item.level),
          rangeData: disposeRangeFunc(item),
          makeProperty: 'edit'
        })
      }
    })

    // 添加删除数据
    let jstrArr = []
    let nstrArr = []
    let indexArr = []
    let ydata = []
    let dCode = ''
    data.forEach(item => {
      nstrArr.push(judgeSaveLevelFunc(item.level))
    })
    yWranEarlyConfDataList.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        ydata = item.devEarlyWarnConfDataList
        item.devEarlyWarnConfDataList?.forEach((item1: WranConfType) => {
          jstrArr.push(judgeSaveLevelFunc(item1.level))
        })
      }
    })

    // nstrArr.forEach(item1 => {
    //   if (jstrArr.indexOf(item1) == -1) {
    //     console.log(item1, 'del')
    //   }
    // })
    console.log(jstrArr, nstrArr, 'jn')
    jstrArr.forEach((item, index) => {
      if (nstrArr.indexOf(item) != -1) {
        console.log(item, '包含')
        indexArr.push(index)
      } else {
        dCode = item
      }
    })

    // indexArr.forEach(item => {
    //   jstrArr.splice(item, 1)
    // })
    console.log(indexArr)

    console.log(jstrArr)
    console.log(dCode, 'dCode')

    ydata.forEach((item: WranConfType) => {
      console.log(judgeSaveLevelFunc(item.level))

      if (dCode == judgeSaveLevelFunc(item.level)) {
        console.log('进来了')

        newData.push({
          confId: confId,
          earlyWarnContent: item.warnMsg,
          earlyWarnLevel: judgeSaveLevelFunc(item.level),
          rangeData: disposeRangeFunc(item),
          makeProperty: 'delete'
        })
      }
    })

    // yWranEarlyConfDataList.forEach((item: paramEarlyWarningConfig) => {
    //   if (item.confId == confId) {
    //     item.devEarlyWarnConfDataList?.forEach((item1: WranConfType) => {
    //       if (nstrArr.indexOf(judgeSaveLevelFunc(item1.level)) == -1) {
    //         data.forEach((item2, index2) => {
    //           if (judgeSaveLevelFunc(item1.level) == judgeSaveLevelFunc(item2.level)) {
    //             newData.push({
    //               confId: confId,
    //               earlyWarnContent: item2.warnMsg,
    //               earlyWarnLevel: judgeSaveLevelFunc(item2.level),
    //               rangeData: disposeRangeFunc(item2),
    //               makeProperty: 'delete'
    //             })
    //           }
    //         })
    //       }
    //     })
    //   }
    // })

    console.log(newData)
    await editDevEarlyWarnConfDataApi(newData)
      .then(() => {
        message.success('保存成功')
      })
      .catch(() => {
        message.error('保存失败')
      })

    getDevParamEarlyWarningConfigDataListFunc()

    // data.forEach((item, index) => {
    //   newData.push({
    //     confId: confId,
    //     earlyWarnContent: item.warnMsg,
    //     earlyWarnLevel: judgeSaveLevelFunc(item.level),
    //     rangeData: disposeRangeFunc(item),
    //     makeProperty: judgeAddOrEditOrDelFunc(confId, item),
    //     confDataId: index + 1
    //   })
    // })
  }

  // 删除配置信息的方法
  const delConf = (confId: number, indexc: number, data) => {
    devParamEarlyWarningConfigDataList.value.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        item.devEarlyWarnConfDataList?.splice(indexc, 1)
      }
    })
    let selectData = []
    data.forEach((item: WranConfType) => {
      if (selectData.indexOf(item.level) == -1) {
        selectData.push(item.level)
      }
    })
    devParamEarlyWarningConfigDataList.value.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        // if (item.selectedLevel?.indexOf(e) == -1) {
        //   item.selectedLevel?.push(e)
        //   console.log(item.selectedLevel)
        // }
        item.selectedLevel = selectData
      }
    })
  }

  // 添加配置信息的方法
  const addConf = (confId: number) => {
    devParamEarlyWarningConfigDataList.value.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        if (item.devEarlyWarnConfDataList?.length < 3) {
          item.devEarlyWarnConfDataList?.push({
            level: '',
            warnRangeValue: '',
            warnRangeType: '两者之间',
            warnRangeLeft: '',
            warnRangeRight: '',
            warnRangeCenter: '',
            warnMsg: ''
          })
        } else {
          message.warn('最多添加三个预警配置')
        }
      }
    })
  }

  // 预警级别选择框的change事件
  const warnLevelChange = (e: any, confId: number, data: []) => {
    console.log(e, confId)
    let selectData = []
    data.forEach((item: WranConfType) => {
      if (selectData.indexOf(item.level) == -1) {
        selectData.push(item.level)
      }
    })
    console.log(selectData)

    devParamEarlyWarningConfigDataList.value.forEach((item: paramEarlyWarningConfig) => {
      if (item.confId == confId) {
        // if (item.selectedLevel?.indexOf(e) == -1) {
        //   item.selectedLevel?.push(e)
        //   console.log(item.selectedLevel)
        // }
        item.selectedLevel = selectData
      }
    })
    // console.log(level)
    // currentSelectedLevel.value.push(level)
    // console.log(currentSelectedLevel.value)
  }

  // 时间段的change事件
  const currentSETimeChange = (e: any) => {
    console.log(e)
  }

  // 修改时间段和间隔时间弹窗的确定点击事件
  const editParamWarnTimeModalOkClick = async () => {
    let data = {
      confId: currentEditParamWarnInfo.value.confId,
      startTime: currentEditParamWarnInfo.value.startTime,
      endTime: currentEditParamWarnInfo.value.endTime,
      intervalTime: currentEditParamWarnInfo.value.intervalTime
    }
    await editDevEarlyWarnConfApi(data)
    // .then(() => {
    //   message.success('修改成功')
    // })
    // .catch(() => {
    //   message.error('修改失败')
    // })
    isShowEditTimeInfoModal.value = false
    console.log(currentEditParamWarnInfo.value)
    getDevParamEarlyWarningConfigDataListFunc()
  }

  // 修改时间段和间隔时间弹窗的取消点击事件
  const editParamWarnTimeModalCancelClick = () => {
    isShowEditTimeInfoModal.value = false
    getDevParamEarlyWarningConfigDataListFunc()
  }

  // 处理预警信息提交的时候的范围数据的函数
  const disposeWranInfoSubDataRangeFunc = () => {
    let type = currentEditParamWarnInfo.value.wranRangeType
    let left = currentEditParamWarnInfo.value.rangeLeftValue
    let right = currentEditParamWarnInfo.value.rangeRightValue
    let center = currentEditParamWarnInfo.value.rangeCenterValue
    let retStr = ''
    switch (type) {
      case '两者之间':
        retStr = left + '-' + right
        break
      case '大于等于':
        retStr = '>=' + center
        break
      case '小于等于':
        retStr = '<=' + center
        break

      default:
        break
    }
    return retStr
  }

  // 修改预警信息的弹窗的确定点击事件
  const editWranInfoModalOkClick = async () => {
    console.log(currentEditParamWarnInfo.value, '当前提交的信息')

    let data = [
      {
        confId: currentEditParamWarnInfo.value.confId,
        earlyWarnContent: '',
        earlyWarnLevel: '0253',
        rangeData: '',
        makeProperty: 'edit',
        confDataId: 1
      },
      {
        confId: currentEditParamWarnInfo.value.confId,
        earlyWarnContent: '',
        earlyWarnLevel: '0254',
        rangeData: '7.1-7.2',
        makeProperty: 'delete',
        confDataId: 2
      },
      {
        confId: currentEditParamWarnInfo.value.confId,
        earlyWarnContent: '',
        earlyWarnLevel: '0255',
        rangeData: '',
        makeProperty: 'add',
        confDataId: 3
      }
    ]

    let levelCode = ''
    switch (currentEditParamWarnInfo.value.currentLevel) {
      case '一级':
        levelCode = '0253'
        break
      case '二级':
        levelCode = '0254'
        break
      case '三级':
        levelCode = '0255'
        break
      default:
        break
    }
    data.forEach(item => {
      if (levelCode == item.earlyWarnLevel) {
        item.earlyWarnContent = currentEditParamWarnInfo.value.wranMsg
        item.rangeData = disposeWranInfoSubDataRangeFunc()
        item.makeProperty = 'add'
      } else {
        item.earlyWarnContent = ''
        item.rangeData = ''
        item.makeProperty = 'delete'
      }
    })
    console.log(data)
  }

  // 点击修改时间信息的点击事件
  const editTimeClick = (info: paramEarlyWarningConfig) => {
    isShowEditTimeInfoModal.value = true
    currentEditParamWarnInfo.value = info
  }

  // 点击修改预警信息的点击事件
  const editWarnClick = (info: paramEarlyWarningConfig) => {
    isShowEditWarnInfoModal.value = true
    currentEditParamWarnInfo.value = info
  }

  // 每个参数开关的change事件
  const checkedChange = async (confId: number, isOpen: boolean) => {
    console.log(devParamEarlyWarningConfigDataList.value)
    if (isOpen) {
      console.log('操作开')

      await openDevEarlyWarnConfApi({confId: confId})
    } else {
      console.log('操作关')
      await closeDevEarlyWarnConfApi({confId: confId})
    }
    getDevParamEarlyWarningConfigDataListFunc()
  }

  // 处理设备参数预警配置的函数
  // const disposeDevParamEarlyWarningConfigDataListFunc = () => {
  //   devParamEarlyWarningConfigDataList.value.forEach((item: paramEarlyWarningConfig) => {})
  // }

  // 初始化拆分范围的函数
  const mountSplitRangeFunc = (range: string) => {
    let obj = {
      type: '',
      left: '',
      right: '',
      center: ''
    }
    if (range.indexOf('-') != -1) {
      let arr = range.split('-')
      // console.log(arr)
      obj.left = arr[0]
      obj.right = arr[1]
      obj.type = '两者之间'
    }
    if (range.indexOf('>') != -1) {
      let arr = range.split('>=')
      // console.log(arr)
      obj.center = arr[1]
      obj.type = '大于等于'
    }
    if (range.indexOf('<') != -1) {
      let arr = range.split('<=')
      // console.log(arr)
      obj.center = arr[1]
      obj.type = '小于等于'
    }

    return obj
  }
  // 获取设备参数预警配置的函数
  const getDevParamEarlyWarningConfigDataListFunc = async () => {
    // isParamWarnConfLoading.value = true
    let data = {
      devId: currentDevId
    }
    const res = await selectDevEarlyWarnConfApi({devId: currentDevId.value})
    console.log(res.data)
    res.data.forEach((item: paramEarlyWarningConfig) => {
      let selectData = []
      item.devEarlyWarnConfDataList?.forEach((item1: WranConfType) => {
        selectData.push(judgeMountLevelFunc(item1.earlyWarnLevel))
        let rangev = mountSplitRangeFunc(item1.rangeData)
        item1.level = judgeMountLevelFunc(item1.earlyWarnLevel)
        item1.warnMsg = item1.earlyWarnContent
        item1.warnRangeCenter = rangev.center
        item1.warnRangeLeft = rangev.left
        item1.warnRangeRight = rangev.right
        item1.warnRangeType = rangev.type
      })
      console.log(selectData)

      item.selectedLevel = selectData
    })

    console.log(res.data, 'dispose')

    // res.data.forEach((item: paramEarlyWarningConfig) => {
    //   // item.devEarlyWarnConfDataList?.forEach((item1: WranConfType) => {

    //   // })
    //   item.devEarlyWarnConfDataList?.push({
    //     level: '',
    //     warnRangeValue: '',
    //     warnRangeType: '两者之间',
    //     warnRangeLeft: '',
    //     warnRangeRight: '',
    //     warnRangeCenter: '',
    //     warnMsg: ''
    //   })
    // })

    yWranEarlyConfDataList.value = res.data
    localStorage.setItem('yWranEarlyConfDataList', JSON.stringify(res.data))
    res.data.forEach(item => {
      if (item.status == 0) {
        console.log('关')
        item.isOpen = false
      } else {
        console.log('开')
        item.isOpen = true
      }
      // item.currentLevel = '一级'
      item.wranRangeType = '两者之间'

      // item.selectedLevel = []
    })
    console.log(res.data)
    devParamEarlyWarningConfigDataList.value = res.data
  }

  // 初始化
  onMounted(() => {
    // 保存devId
    console.log(route.query.devId, 'devID')

    currentDevId.value = route.query.devId
    // 查询预警配置数据
    getDevParamEarlyWarningConfigDataListFunc()
  })
</script>

<style lang="less" scoped>
  ::v-deep .ant-card-body {
    padding: 0;
  }

  .main_box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .card_main_item {
      width: 830px;
      padding: 14px 0px 0px 0px;
      margin-bottom: 16px;
      .title_box {
        position: relative;
        line-height: 36px;
        padding: 3px 0px 3px 20px;
        font-size: 18px;
        letter-spacing: 2px;
        font-weight: bold;
        color: #324569;
        margin-bottom: 8px;
        background-image: url(https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/card-vein-inline.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .param_ics {
          display: flex;

          .param_img {
            position: relative;
            top: 6px;
          }
        }

        span {
          font-size: 18px;
          font-weight: 600;
          font-family: kaigengo-bold !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
        }

        .param_switch_box {
          position: absolute;
          top: 2px;
          right: 80px;
        }
      }

      .content_box {
        display: flex;
        width: 800px;
        flex-wrap: wrap;
        // justify-content: space-around;
        padding: 0px 22px 60px 22px;

        .label {
          font-size: 15px;
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
          line-height: 40px;
          width: 80px;
          display: inline-block;
          text-align: right;
          margin-right: 20px;
        }

        .time_quantum_box {
          width: 250px;
          .startTime,
          .endTime {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
          }
        }

        .interval_time_box {
          width: 250px;
          margin-left: 50px;
          .value {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
          }

          .unit {
            margin-left: 6px;
            font-size: 14px;
            color: gray;
          }
        }

        .plus_icon_box {
          text-align: center;

          svg {
            margin: 0 auto;
          }
        }
      }

      .footer {
        margin-top: 20px;
        height: 42px;
        font-size: 16px;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: flex;
        background-color: #e4eaf5;

        .edit_time {
          cursor: pointer;
          display: flex;
          transition: 0.3s;
          width: 50%;
          text-align: center;
          line-height: 42px;
          padding-left: 18%;
          img {
            margin-right: 4px;
            margin-top: 8px;
            height: 22px;
          }
          .label {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: #366cee;
            margin-right: 10px;
          }
        }

        .edit_time:hover {
          background-color: #bed8f6;
          // color: white;
        }

        .edit_wran {
          cursor: pointer;
          display: flex;
          transition: 0.3s;
          width: 50%;
          text-align: center;
          line-height: 42px;
          padding-left: 18%;

          img {
            margin-right: 4px;
            margin-top: 8px;
            height: 22px;
          }
          .label {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: #366cee;
            margin-right: 10px;
          }
        }

        .edit_wran:hover {
          background-color: #bed8f6;
          // color: white;
        }
      }
    }

    // .card_left {
    //   position: absolute;
    //   left: 0;
    // }
    // .card_right {
    //   position: absolute;
    //   right: 0;
    // }
  }

  .edit_warn_modal_box {
    // width: 800px;
    padding: 20px 0px;
    .wran_level {
      padding: 0px 48px;
      .label {
        font-size: 15px;
        font-weight: 500 !important;
        font-family: kaigengo-medium !important;
        --tw-text-opacity: 1 !important;
        color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
        margin-right: 10px;
      }
    }

    .warn_early_content_box {
      .one {
        padding: 10px 30px;
        line-height: 40px;
        .warn_early_label {
          padding-left: 15px;
          img {
            display: inline;
            position: relative;
            top: -4px;
            width: 30px;
          }
          font-size: 17px;
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          color: #fdcf35;
        }

        .warn_range {
          padding: 6px 20px;
          .label {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
            margin-right: 10px;
          }

          .warning_info {
            margin-top: 10px;
            .label {
              margin-bottom: 10px;
              display: inline-block;
            }
          }
        }
      }

      .two {
        padding: 10px 30px;
        line-height: 40px;
        .warn_early_label {
          padding-left: 15px;
          img {
            display: inline;
            position: relative;
            top: -4px;
            width: 30px;
          }
          font-size: 17px;
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          color: #fe9f2f;
        }

        .warn_range {
          padding: 6px 20px;
          .label {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
            margin-right: 10px;
          }

          .warning_info {
            margin-top: 10px;
            .label {
              margin-bottom: 10px;
              display: inline-block;
            }
          }
        }
      }

      .three {
        padding: 10px 30px;
        line-height: 40px;
        .warn_early_label {
          padding-left: 15px;
          img {
            display: inline;
            position: relative;
            top: -4px;
            width: 30px;
          }
          font-size: 17px;
          font-weight: 500 !important;
          font-family: kaigengo-medium !important;
          --tw-text-opacity: 1 !important;
          color: #fa0923;
          // line-height: 40px;
          // width: 80px;
          // display: inline-block;
          // text-align: right;
          // margin-right: 20px;
        }

        .warn_range {
          padding: 6px 20px;
          .label {
            font-size: 15px;
            font-weight: 500 !important;
            font-family: kaigengo-medium !important;
            --tw-text-opacity: 1 !important;
            color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
            margin-right: 10px;
          }

          .warning_info {
            margin-top: 10px;
            .label {
              margin-bottom: 10px;
              display: inline-block;
            }
          }
        }
      }

      .not_warn {
        height: 30px;
      }
    }
  }

  .edit_time_modal_box {
    padding: 20px;

    .time_quantum {
      margin-bottom: 10px;
      .label {
        display: inline-block;
        width: 80px;
        text-align: right;
        font-size: 15px;
        font-weight: 500 !important;
        font-family: kaigengo-medium !important;
        --tw-text-opacity: 1 !important;
        color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
        margin-right: 10px;
      }
    }

    .interval_time {
      margin-top: 20px;
      .label {
        display: inline-block;
        width: 80px;
        text-align: right;
        font-size: 15px;
        font-weight: 500 !important;
        font-family: kaigengo-medium !important;
        --tw-text-opacity: 1 !important;
        color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
        margin-right: 10px;
      }

      .unit {
        margin-left: 6px;
        font-size: 14px;
        color: gray;
      }
    }
  }

  .split_hr {
    padding-left: 20px;
    width: 820px;
    margin: 16px 0;
    // height: 20px;
    // border: 1px solid gray;
    font-size: 17px;
    font-weight: 500 !important;
    font-family: kaigengo-medium !important;
    --tw-text-opacity: 1 !important;
    color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
    margin-right: 10px;
  }

  .not_data {
    width: 100%;
    letter-spacing: 5px;
    text-align: center;
    // .text {
    font-size: 20px;
    font-weight: 500 !important;
    font-family: kaigengo-medium !important;
    --tw-text-opacity: 1 !important;
    color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
    margin-right: 10px;
    // }
  }
  ::v-deep .ant-switch-checked {
    background-color: #1890ff !important;
  }

  ::v-deep .ant-switch {
    background-color: #bfbfbf;
  }

  // ::v-deep .ant-modal {
  //   width: 800px !important;
  // }
</style>
